<script setup lang="ts">
import { watch, ref } from 'vue'
import axios from 'axios'
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import 'dayjs/locale/zh-cn'
import { ArticleResData, ArticleItem } from '../types/data'
const props = defineProps<{ channelId: number }>()
dayjs.extend(relativeTime)
dayjs.locale('zh-cn')

const list = ref<ArticleItem[]>([])
watch(
  () => props.channelId,
  async () => {
    const res = await axios.get<ArticleResData>(
      'http://geek.itheima.net/v1_0/articles',
      {
        params: {
          channel_id: props.channelId,
          timestamp: Date.now()
        }
      }
    )

    list.value = res.data.data.results
  },
  { immediate: true }
)
</script>

<template>
  <div class="article-list">
    <div class="article-item" v-for="item in list" :key="item.art_id">
      <p class="title">
        {{ item.title }}
      </p>
      <template v-if="item.cover.type > 0">
        <img
          class="img"
          v-for="image in item.cover.images"
          :src="image"
          alt=""
        />
      </template>
      <div class="info">
        <span>{{ item.aut_name }}</span>
        <span>{{ item.comm_count }}评论</span>
        <span>{{ dayjs(item.pubdate).fromNow() }}</span>
      </div>
    </div>
  </div>
</template>
